<?xml version="1.0" encoding="utf-8"?>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title><s:text name="label.title"/></title>
		<link rel="stylesheet" type="text/css" media="screen" href="css/default.css" /> 
		<sj:head jqueryui="true" jquerytheme="black-tie"/>
		<script type="text/javascript" src="js/jquery.maskedinput-1.2.2.min.js"></script>
		<script type="text/javascript" src="js/pages/index.js"></script>		
	</head>
	<body>
		<div id="container">
		    <div id="header" class="ui-widget-header">
		    	<div id="nav">
		    		<ul class="hlist">
		    			<li>
		    				<s:url id="urlhome" value="/sign-in.action"/>
						    <sj:a href="%{urlhome}">
								<s:text name="label.home"/>
							</sj:a>
		    			</li>
		    			<li>
		    				<sj:a href="%{urlhome}">
								<s:text name="label.buyer"/>
							</sj:a>
		    			</li>
		    			<li>
		    				<sj:a href="%{urlhome}">
								<s:text name="label.seller"/>
							</sj:a>		    				
		    			</li>
		    		</ul>
		    	</div>
		    	<div id="login">
		    		<ul class="hlist">
		    			<li>
		    				<s:url id="urlsignin" value="/sign-in.action"/>
						    <sj:a openDialog="dlgsignin" href="%{urlsignin}">
						    	Sign In
						    </sj:a>
						    <sj:dialog id="dlgsignin" autoOpen="false" modal="true" title="Sign In" width="500"/>
		    			</li>
		    			<li>
		    				<sj:a openDialog="dlgsignup" onClickTopics="before">
						    	Sign Up
						    </sj:a>
						    <sj:dialog id="dlgsignup" autoOpen="false" modal="true" title="Sign Up" width="500">
						    	<s:url id="urlsignupbuyer" action="/sign-up-buyer.action"/>
						    	<s:url id="urlsignupseller" action="/sign-up-seller.action"/>
						       	<sj:tabbedpanel id="signuptab" selectedTab="1" animate="true">
						       		<sj:tab cssStyle="display:none"/>
						       		<sj:tab id="tab1" href="%{urlsignupbuyer}" key="label.buyer"/>	
							      	<sj:tab id="tab2" href="%{urlsignupseller}" key="label.seller"/>							      							      	
							    </sj:tabbedpanel>
						    </sj:dialog>
		    			</li>
		    		</ul>
		    	</div>
			</div>
			<div class="clearBoth"></div>
		    <!-- end of header -->
		    <div id="content">
				<div id="sidebar">
			   		<h2>
			      		Sidebar
			        </h2>
			        <div class="ui-widget-content ui-corner-all">
			       		<p>
			         		Sidebar Content<br />
			          	</p>
			          	<div id="test">
			          		Test
			          	</div>
			        </div>
				</div>
				<!-- end of sidebar -->
				<div id="sidebar2">
			      	<h2>
			      		Sidebar2
			        </h2>
			        <div class="ui-widget-content ui-corner-all">
			       		<p>
			            	sidebar2 content
			          	</p>
			        </div>
				</div>
				<!-- end of sidebar -->
			  	<div id="main">
			        <h2>
			          Main Box
			        </h2>
			        <div class="ui-widget-content ui-corner-all">
			      		<p>
			            	Main Box Content
			          	</p>
			          	<p>
			          		<input type="text" id="firstName" name="firstName" />
			          		<span class="tooltip">Tool Tip 1</span>
			          	</p>
			          	<p>
			          		<input type="text" id="lastName" name="lastName" />
			          		<span class="tooltip">Tool Tip 2</span>
			          	</p>
			        </div>
			        <!-- end of box -->
				</div>
				<!-- end of main -->
				<div class="clearBoth"></div>
			</div>
			<!-- end of content -->
			<div id="footer">
				<h2>
			        Footer
				</h2>
			</div>
			<!-- end of footer -->
		</div>
		<!-- end of container -->
	</body>
</html>